//创建路由，并暴露出去

//引入createRouter
import { createRouter } from "vue-router";
import { createWebHistory } from "vue-router";
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from "@/pages/News.vue";
import NewsDetails from "@/pages/NewsDetails.vue";

//创建路由器
/*
hash模式：在URL中会包含一个“#”符号（也称为锚点）和锚点值（hash值）。例如，http://example.com/#/home。
history模式：URL则不会包含其他特殊符号，看起来更加美观和优雅。例如，http://example.com/home。
*/
export const router = createRouter({
    history: createWebHistory(),//使用history工作模式，还有hash工作模式
    //设置路由
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/news',
            component: News,
            children: [
                {
                    name: 'news',
                    // path: 'details/:id/:x/:y',//第一种写法
                    path: 'details',//第二种和第三种写法
                    component: NewsDetails,
                    // 第一种写法:将路由收到的所有params参数作为props传给路由组件
                    // props: true
                    // 第二种写法:函数写法，可以自己传想要的参数
                    // props(to) {
                    //     return to.query
                    // },
                    // 第三种写法:对象写法
                    props: {
                        id: '1', x: '哈哈', y: '呵呵'
                    }
                }
            ]
        },
        {
            name: 'about',
            path: '/about',
            component: About
        }
    ]
})
